<template>
  <el-dialog :title="title" width="800px" :visible.sync="visible" destroy-on-close @close="closeCallback">
    <div class="card">
    <p class="title"><i class="fa fa-th-large fa-lg"></i>品牌信息</p>
    <el-form :model="brandForm" status-icon :rules="rules" ref="brandForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="品牌" prop="bname">
        <el-input v-model="brandForm.bname" autocomplete="off" clearable></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="bsex">
        <el-radio-group v-model="brandForm.bsex">
          <el-radio border label="男"></el-radio>
          <el-radio border label="女"></el-radio>
          <el-radio border label="男女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="禁用状态" prop="bstate">
        <el-switch v-model="brandForm.bstate"></el-switch>
      </el-form-item>
      <el-form-item label="备注" porp="bremarks">
        <el-input type="textarea" placeholder="请输入备注" v-model="brandForm.bremarks" maxlength="20" show-word-limit></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('brandForm')">确 定</el-button>
        <el-button @click="resetForm('brandForm')">重 置</el-button>
      </el-form-item>
    </el-form>
    </div>
  </el-dialog>
</template>

<script>
import form from "../../../api/apis/product/brands"
import execute from "../../../utils/constant/execute"
import stateCode from "../../../utils/constant/stateCode"

export default {
  name: "brandInfo",
  props: {
    title: { type: String, default: "颜色信息" },
    dialogVisible: { type: Boolean, default: false },
    brands: {}
  },
  data () {
    var checkBrands = (rule, value, callback) => {
      if (this.oldName !== value) {
        form.fetchCheckBrands("bname=" + value).then((res) => {
          if (res.data.code === stateCode.OPRATION_FAILED) {
            callback(new Error(res.data.msg))
          } else if (res.data.code === stateCode.OPRATION_SUCCESS) {
            callback()
          }
        })
      } else {
        callback()
      }
    }
    return {
      visible: this.dialogVisible,
      brandForm: {},
      oldName: "",
      rules: {
        bname: [
          { required: true, message: "请输入品牌", trigger: "blur" },
          { validator: checkBrands, trigger: "blur" }
        ],
        bsex: [{required: true, message: "请选择性别", trigger: "change"}]
      }
    }
  },
  methods: {
    closeCallback () {
      this.$emit("successCallback")
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let formData = {
            bid: this.brandForm.bid,
            bname: this.brandForm.bname,
            bremarks: this.brandForm.bremarks,
            bstate: this.brandForm.bstate,
            bsex: this.brandForm.bsex
          }
          if (this.brandForm.bid !== undefined) {
            form.fetchEditBrands(formData).then((res) => {
              if (res.data.code === stateCode.OPRATION_SUCCESS) {
                this.$message({ type: execute.SUCCESS, message: res.data.msg })
              } else {
                this.$message({ type: execute.WARNING, message: res.data.msg })
              }
            }).catch((res) => {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: execute.ERROR
              })
            })
          } else {
            form.fetchAddBrands(formData).then((res) => {
              if (res.data.code === stateCode.OPRATION_SUCCESS) {
                this.$message({ type: execute.SUCCESS, message: res.data.msg })
              } else {
                this.$message({ type: execute.WARNING, message: res.data.msg })
              }
            }).catch((res) => {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: execute.ERROR
              })
            })
          }
          this.visible = false
        } else {
          return false
        }
      })
    }
  },
  mounted () {
    this.brandForm = this.brands
    this.oldName = this.brands.bname
  }
}
</script>
<style scoped>
  .demo-ruleForm {
    width: 460px;
    padding-top: 25px;
  }
  .el-select {
    width: 100%;
  }
  .card {
    width: 560px;
    padding-bottom: 15px;
    margin: 0px auto;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
